<template>
    <div class="ticket-wrap">
        <div class="text"><div class="text1"></div>国内机票</div>
        <div class="ticket-wrap-top">
            <div class="ticket-wrap-topLeft">
                <topLeft></topLeft>
            </div>
            <div class="ticket-wrap-topRight">
                <img src="https://b1-q.mafengwo.net/s15/M00/C4/76/CoUBGV4O9suAX0ViAAHIIQPFJ1s41.jpeg" alt="">
            </div>

        </div>
        <div class="ticket-wrap-bottom">
            <bottom></bottom>
        </div>
        <div class="ticket-wrap-main">
            <div class="text"><div class="text2"></div>特价机票</div>
            <bottomMain></bottomMain>
        </div>
    </div>
</template>

<script>
import topLeft from './topLeft.vue'
import bottom from './bottom.vue'
import bottomMain from './bottomMain.vue'
export default {
    name: 'WorkspaceJsonTicketheard',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
    components:{
        topLeft,
        bottom,
        bottomMain
    }
};
</script>

<style lang="scss" scoped>
.ticket-wrap{
    margin: 0 auto;
    width: 1200px;
    min-height: 500px;
    // background: rgb(81, 212, 221);
    .text{
        font-size: 23px;
        margin-left: 30px;
        padding-top: 20px;
        color: #808080;
        .text1{
            width: 30px;
            height: 25px;
            display: inline-block;
            background: url("../../assets/five/2.png") 0 0 no-repeat;
            background-size: auto;
            vertical-align: middle;
            margin-right: 12px;
        }
        .text2{
            width: 30px;
            height: 25px;
            display: inline-block;
            background: url("../../assets/five/2.png") 0 0 no-repeat;
            background-size: auto;
            vertical-align: middle;
            margin-right: 12px;
            background-position: -30px 0;
        }
    }
    .ticket-wrap-bottom{
        width: 100%;
        margin: 0 auto;
        margin-top:-35px ;
        height: 60px;
        // background: rgb(241, 180, 10);
    }
    .ticket-wrap-top{
        width: 100%;
        min-height: 400px;
        display: flex;
        justify-content: space-between;
        margin-top: -30px;
        .ticket-wrap-topLeft{
            width: 450px;
            height: 450px;
            margin-top: 50px;
            // background: rgb(66, 34, 209);
        }
        .ticket-wrap-topRight{
            width: 700px;
            height: 450px;
            margin-top: 50px;
            // background: rgb(57, 199, 45);
            overflow: hidden;

            img{
                height: 405px;
            }
        }
    }
    .ticket-wrap-main{
        margin-top: 10px;
        width: 100%;
        height: 600px;
        // background-color: antiquewhite;
    }
}
</style>